<template>
  <div>
    <el-form-item>
      <el-date-picker
        v-model="startEndTime.startTime"
        type="date"
        placeholder="开始时间"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions0"
        @change="onchange"
      />
    </el-form-item>
    <span class="ec-space-split">~</span>
    <el-form-item style="margin-left:5px">
      <el-date-picker
        v-model="startEndTime.endTime"
        :picker-options="pickerOptions1"
        type="date"
        placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="onchange"
      />
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'StartEndTime',
  model: {
    prop: 'time',
    event: 'change'
  },
  props: {
    time: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      startEndTime: {
        startTime: '',
        endTime: ''
      },
      pickerOptions0: {
        disabledDate: time => {
          if (this.startEndTime.endTime) {
            return (
              time.getTime() >
              new Date(this.startEndTime.endTime).getTime()
            )
          }
        }
      },
      pickerOptions1: {
        disabledDate: time => {
          if (this.startEndTime.startTime) {
            return (
              time.getTime() <
              new Date(this.startEndTime.startTime).getTime()
            )
          }
        }
      }

    }
  },
  watch: {
    'time': function() {
      this.startEndTime = this.time || {}
    }
  },
  methods: {
    onchange(value) {
      this.$emit('change', this.startEndTime)
    }
  }
}
</script>

<style scoped>
</style>
